// 菜品列表业务模块
console.log( '菜品列表业务模块...' )

import './food-common'

// let baseURL = ''
// if (__WEBPACK__ENV === 'dev') {
//     baseURL = 'http://localhost:3000/api'
// }
// else{
//     baseURL = 'http://localhost:8080'
// }
import baseURL from './webpack-env'

/* import axios from "axios"

// 存储当前页面url地址
localStorage.setItem('targetURL',location.href)

// 获取本地存储的token
let token = localStorage.getItem('token')

// 发送是否登录验证
axios.get('http://localhost:8080/user/islogin',{
    headers: {
        authorization: token
    }
})
.then((res)=>{
    let data = res.data
    if (data.code === 1) {// 已登录
        $('.nickname').text(data.userInfo.nick)
    }
    else{// 未登录
        location.href = './login.html'
    }
})

// 点击 退出登录
$('.logout').on('click',function (){
    // 删除本地token
    localStorage.removeItem('token')
    // 提示用户
    alert('退出登录成功')
    // 跳转到首页
    location.href = './index.html'
}) */

import axios from "axios"

// let count = 0 // 记录数据总条数
let pages = 0 // 记录数据总页数
let page = 1 // 记录当前页码
let size = 4 // 记录每页条数

// 进入页码获取第一页的数据并展示
getPageData(page,size)

// 获取分页数据
function getPageData(page,size){
    // 发送请求
    axios.post(baseURL + '/food/getpage',{page,size})
    .then((res)=>{
        let {data} = res
        if (data.code === 1) {
            // count = data.count
            pages = data.pages

            // 根据数据渲染表格
            renderTable(data.data)

            // 根据数据渲染分页
            renderPages(page,pages)
        }
        else {
            alert(data.msg)
        }
    })
}

// 根据数据渲染表格
function renderTable(arr){
    // console.log( arr )
    var template = `<tr>
        <th>菜品名称</th>
        <th>菜品描述</th>
        <th>菜品价格</th>
        <th>菜品分类</th>
        <th>菜品图片</th>
        <th>操作</th>
    </tr>`
    arr.forEach(item=>{
        template += `<tr>
            <td class="name">${item.name}</td>
            <td class="desc">${item.desc}</td>
            <td class="price">${item.price}</td>
            <td class="type">${item.type}</td>
            <td><img class="img" src="${item.imgurl}" alt=""></td>
            <td>
                <button class="btn btn-success btn-xs edit" data-toggle="modal" data-target="#myModal">
                    <span class="glyphicon glyphicon-pencil"></span> 编辑
                </button>
                <button class="btn btn-danger btn-xs">
                    <span class="glyphicon glyphicon-remove"></span> 删除
                </button>
            </td>
        </tr>`
    })
    $('.table tbody').html(template)
}

// 根据数据渲染分页
function renderPages(page,pages){
    // console.log( page,pages )

    // 上一页的结构
    var template = `<li class="prev">
        <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        </a>
    </li>`

    // 页码的结构
    for (var i = 1; i <= pages; i++){
        template += `<li class="num"><a href="#">${i}</a></li>`
    }

    // 下一页的结构
    template += `<li class="next">
        <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        </a>
    </li>`

    // 将拼接好的分页添加到页面中
    $('.pagination').html(template)

    // 给当前页添加选中状态
    $('.pagination li').eq(page).addClass('active')
}

// 点击 上一页
$('.pagination').on('click','.prev',function (){
    // 当前页码-1
    page--
    if (page === 0) {
        page = 1
        return
    }

    // 根据当前页码获取分页数据
    getPageData(page,size)
})

// 点击 下一页
$('.pagination').on('click','.next',function (){
    // 当前页码+1
    page++
    if (page > pages) {
        page = pages
        return
    }

    // 根据当前页码获取分页数据
    getPageData(page,size)
})

// 点击 某一页
$('.pagination').on('click','.num',function (){
    // 获取点击的页码
    page = Number($(this).find('a').text())

    // 根据当前页码获取分页数据
    getPageData(page,size)
})

// 关键字查询
$('.btn-search').click(function (){
    // 获取输入的关键字
    var word = $('#word').val()
    // 空值判断
    if (!word) {
        alert('搜索内容不能为空')
        return
    }
    // 发送请求
    axios.post(baseURL + '/food/search',{word})
    .then((res)=>{
        if (res.data.code === 1) {
            // 渲染表格
            renderTable(res.data.data)
        } else {
            $('.table tbody').text('暂无数据!')
        }
    })
})

// 删除菜品
$('.table').on('click','.btn-danger',function (){
    // 获取要删除的菜品名称
    var name = $(this).parent().parent().children().eq(0).text()
    // 删除对应的数据
    axios.post(baseURL + '/food/del',{name})
    .then((res)=>{
        alert(res.data.msg)
        if (res.data.code === 1) {
            // 重新获取数据渲染数据
            getPageData(page,size)
        }
    })
})

// 保存菜品原始名称
var originalname

// 编辑菜品
$('.table').on('click','.edit',function (){
    // 获取菜品原始数据
    var name = $(this).parent().parent().children().eq(0).text()
    var desc = $(this).parent().parent().children().eq(1).text()
    var price = $(this).parent().parent().children().eq(2).text()
    var type = $(this).parent().parent().children().eq(3).text()
    var imgurl = $(this).parent().parent().children().eq(4).find('img').attr('src')

    originalname = name

    // 显示菜品原始数据
    $('#name').val(name)
    $('#desc').val(desc)
    $('#price').val(price)
    $('#type').val(type)
    $('#imgurl').val(imgurl)
})

// 上传编辑图片
$('.upform').submit(function (e){
    // 阻止表单默认提交
    e.preventDefault()
    // 创建formdata对象
    var formData = new FormData(this)
    // 发送请求
    axios.post(baseURL + '/file/upload',formData)
    .then((res)=>{
        alert(res.data.msg)
        if (res.data.code === 1) {
            $('#imgurl').val(res.data.imgurl)
        }
    })
})

// 保存修改
$('.save').click(function (){
    // 获取编辑后的菜品数据
    var name = $('#name').val()
    var desc = $('#desc').val()
    var price = $('#price').val()
    var type = $('#type').val()
    var imgurl = $('#imgurl').val()
    // 发送请求
    axios.post(baseURL + '/food/update',{originalname,name,desc,price,type,imgurl})
    .then((res)=>{
        alert(res.data.msg)
        if (res.data.code === 1) {
            $('#myModal').modal('hide')// 隐藏模态框
            // 重新获取数据渲染数据
            getPageData(page,size)
        }
    })
})

